<!-- @format -->

<script setup>
	const props = defineProps({
		// 接收的数据名称  todos
		todos: {
			type: Array, // 数组类型
			default: () => [] // 默认值
		}
	})

	const emit = defineEmits()
</script>

<template>
	<section class="main">
		<input
			id="toggle-all"
			class="toggle-all"
			type="checkbox" />
		<label for="toggle-all">Mark all as complete</label>
		<ul class="todo-list">
			<li
				v-for="(item, index) in props.todos"
				:key="item.id"
				:class="{ completed: item.finished }">
				<div class="view">
					<input
						v-model="item.finished"
						class="toggle"
						type="checkbox" />
					<label>{{ item.name }}</label>
					<button
						class="destroy"
						@click="emit('del-todo', index)"></button>
				</div>
			</li>
		</ul>
	</section>
</template>
